import React,{ Component } from 'react';

import TodoHeader from './components/TodoHeader';
import TodoMain from './components/TodoMain';
import TodoFooter from './components/TodoFooter';
import './App.css';
class App extends Component {

    state = {
        todoList:[
            {
                // 唯一标识
                /* 
                    Math.random() 生成随机小数小于1
                    Math.random().toString(36) 转36进制小数字符串
                    Math.random().toString(36).slice(2) 截取前两位 0.
                */
                id:Math.random().toString(36).slice(2),
                // 标题
                title:"金庸",
                // 是否被选中
                isChecked:true
            },
            {
                // 唯一标识
                id:Math.random().toString(36).slice(2),
                // 标题
                title:"古龙",
                // 是否被选中
                isChecked:false
            },
            {
                // 唯一标识
                id:Math.random().toString(36).slice(2),
                // 标题
                title:"郭敬明",
                // 是否被选中
                isChecked:false
            }
        ]
    }

    // 根据ID修改是否选中的状态
    changeIsCheckedById(id) {
        //1.复制
     /*    const copyTodoList = [...this.state.todoList];
        const todoList = Array.from(this.state.todoList);
        const info = todoList.find(v => v.id === id);
        info.isChecked = !info.isChecked;
        this.setState({
            todoList
        }) */

        // 2- MAP映射一个新的数组
        this.setState({
            todoList: this.state.todoList.map(item => {
                if (item.id === id) item.isChecked = !item.isChecked;
                return item;
            })
        })
    }

    // 添加数据
    addTodo(e) {
        // 如果按下了回车键
        if (e.keyCode === 13) {
            /*伪代码（思路）
            *   1- 接收写入的内容
            *   2- 验证内容是否为空
            *   3- 验证内容是否与列表中的标题是重复
            *   4- 将内容放置到数据状态todoList头部            *
            * */
            const title = e.target.value.trim();// 接收写入的内容
            if (title.length === 0) {
                alert("请输入内容!!!")
                return;
            }
            // find查找第一个满足条件的元素，并返回。如果没有满足条件的元素，返回的是undefined
            if (this.state.todoList.find(v => v.title === title)) {
                alert('内容重复,请重新输入!!');
                return;
            }
            //1.符合条件数据设置状态数据
            //深拷贝复制数据
           /*  const todoList = JSON.parse(JSON.stringify(this.state.todoList));
            //开头添加数据
            todoList.unshift({
                id: Math.random().toString(36).slice(2),
                title,
                isChecked:false
            })
            this.setState({ todoList });
            e.target.value = null; */

            //2.符合条件数据设置状态数据
            this.setState({
                todoList: [
                    {
                        id: Math.random().toString(36).slice(2),
                        title,
                        isChecked:false
                    },
                    ...this.state.todoList
                ]
            })
        }
    }
    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <TodoHeader addTodo={this.addTodo.bind(this)} />
                    <TodoMain
                        todoList={this.state.todoList}
                        changeIsCheckedById={this.changeIsCheckedById.bind(this)}
                    />
                    <TodoFooter/>
                </div>
            </div>
            )
    }
}

export default App;